<template>
  <view class="container">
    <button @click="handleWeappTransfer" class="transfer-btn">
      调起用户确认收款
    </button>
    <view class="result" v-if="resultMsg">{{ resultMsg }}</view>
  </view>
</template>

<script>
import { request } from '../../../utils/request';
export default {
  data() {
    return {
      // 基础参数（实际项目中从后端接口获取）
      mchId: '', // 商户号 - 已移除硬编码值
      packageInfo: '', // 转账接口返回的package_info - 已移除硬编码值
      appId: '', // 应用ID - 已移除硬编码值
      resultMsg: '', // 操作结果信息
      isWechat: false // 是否在微信环境
    };
  },
  onLoad() {
    // 新增：页面加载时从后端获取支付参数
    this.getTransferParams();
  },
  methods: {
    // 新增：获取支付参数的API请求方法
    getTransferParams() {
      request({
        url: '/Withdrawals/getTransferParams', // 假设的后端接口路径，实际项目中需替换为真实接口
        method: 'GET'
      }).then(res => {
        console.log('获取支付参数成功:', res);
        if (res.code === 1) {
          this.mchId = res.data.mchId;
          this.packageInfo = res.data.packageInfo;
          this.appId = res.data.appId;
        } else {
          uni.showToast({
            title: '获取支付参数失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('获取支付参数异常:', err);
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        });
      });
    },
    // 检查运行环境
    // 微信小程序环境处理
    handleWeappTransfer() {
      // 检查是否支持该API
      if (wx.canIUse('requestMerchantTransfer')) {
        wx.requestMerchantTransfer({
          mchId: this.mchId,
          appId: this.appId,
          package: this.packageInfo,
          success: (res) => {
            this.resultMsg = '页面展示成功（不代表付款成功）';
            console.log('success:', res);
          },
          fail: (res) => {
            this.resultMsg = `展示失败: ${res.errMsg}`;
            console.log('fail:', res);
          },
          complete: (res) => {
            // 处理用户取消场景
            if (res.errMsg === 'requestMerchantTransfer:cancel') {
              this.resultMsg = '用户已取消收款';
            }
          }
        });
      } else {
        uni.showModal({
          content: '你的微信版本过低，请更新至最新版本',
          showCancel: false
        });
      }
    },
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.transfer-btn {
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #07c160;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.result {
  margin-top: 40rpx;
  color: #333;
  font-size: 28rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
}
</style>